import 'package:edu/pages/main_tab/acount/acount_page.dart';
import 'package:edu/pages/main_tab/acount/acount_page_logic.dart';
import 'package:edu/pages/main_tab/category/category_page.dart';
import 'package:edu/pages/main_tab/category/category_page_logic.dart';
import 'package:edu/pages/main_tab/edu/edu_page.dart';
import 'package:edu/pages/main_tab/edu/edu_page_logic.dart';
import 'package:flutter/material.dart';
import 'package:lazy_load_indexed_stack/lazy_load_indexed_stack.dart';
import 'package:edu/constants/app_strings.dart';
import 'package:edu/pages/main_tab/main_tab_logic.dart';
import 'package:provider/provider.dart';

class MainTab extends StatefulWidget {
  const MainTab({super.key});

  @override
  State<MainTab> createState() => _MainTabState();
}

class _MainTabState extends State<MainTab> {
  late List<Widget> _tabs;
  // late int _currentIndex;

  @override
  void initState() {
    super.initState();

    // 创建页面
    _tabs = [
      // 首页
      Container(color: Colors.red),
      // 分类
      ChangeNotifierProvider(
        create: (context) => CategoryPageLogic(),
        child: const CategoryPage(),
      ),
      // 学习
      ChangeNotifierProvider(
        create: (context) => EduPageLogic(),
        child: const EduPage(),
      ),
      // 账号
      ChangeNotifierProvider(
        create: (context) => AcountPageLogic(),
        child: const AcountPage(),
      ),
    ];

    context.read<MainTabLogic>().init();
  }

  // 构建页面
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildPageView(context),
      // 构建底部导航栏点击效果
      bottomNavigationBar: _buildBottomNavigationBar(context),
    );
  }

  Widget _buildPageView(BuildContext context) {
    return Selector<MainTabLogic, int>(
      selector: (context, logic) => logic.mainTabIndex,
      builder: (context, index, child) {
        return LazyLoadIndexedStack(index: index, children: _tabs);
      },
    );
  }

  // 构建底部导航栏
  Widget _buildBottomNavigationBar(BuildContext context) {
    final bottomTabs = <BottomNavigationBarItem>[
      // 首页
      const BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: AppStrings.home,
      ),
      // 分类
      const BottomNavigationBarItem(
        icon: Icon(Icons.grid_view_rounded),
        label: AppStrings.category,
      ),
      // 学习
      const BottomNavigationBarItem(
        icon: Icon(Icons.menu_book_rounded),
        label: AppStrings.learning,
      ),
      // 账号
      const BottomNavigationBarItem(
        icon: Icon(Icons.person_2_rounded),
        label: AppStrings.profile,
      ),
    ];

    // 构建底部导航栏点击效果
    return Selector<MainTabLogic, int>(
      selector: (_, logic) => logic.mainTabIndex,
      builder: (context, index, child) {
        return BottomNavigationBar(
          // 固定样式, 显示文字描述
          type: BottomNavigationBarType.fixed,
          // 选中颜色
          selectedItemColor: Theme.of(context).colorScheme.primary,
          // 未选中颜色
          unselectedItemColor: Theme.of(context).colorScheme.secondary,
          items: bottomTabs,
          currentIndex: index,
          // 点击事件,状态更新
          onTap: (index) {
            final logic = context.read<MainTabLogic>();
            logic.setMainTabIndex(index);
          },
        );
      },
    );
  }
}
